<template>
  <div class="search">
    <my-Form v-bind="formConfig" v-model="formDate">
      <template #header>
        <div class="title">页面检索</div>
      </template>

      <template #footer>
        <div class="footer">
          <el-button @click="reset" size="small">
            重置
            <el-icon><refresh-left /></el-icon>
          </el-button>

          <el-button @click="search" size="small" type="primary">
            搜索
            <el-icon><search /></el-icon>
          </el-button>
        </div>
      </template>
    </my-Form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

import myForm, { IFormItem } from '@/components/myForm/myForm.vue';
import { RefreshLeft, Search } from '@element-plus/icons';

export default defineComponent({
  props: {
    formConfig: {
      type: Object,
      required: true,
    },
  },

  emits: ['reset', 'search'],

  setup(props, { emit }) {
    // 双向绑定最好ref
    const formDataOrigin = (props.formConfig.formItems as IFormItem[]).reduce(
      (p, c) => {
        p[c.key] = '';
        return p;
      },
      {}
    );

    const formDate = ref(formDataOrigin);

    const color = ref('#727477');
    const changeColor = (min: number, max: number) =>
      Math.floor(Math.random() * (max - min)) + min;

    setTimeout(() => {
      color.value = `rgba(${changeColor(0, 255)},${changeColor(
        0,
        255
      )},${changeColor(0, 255)}, 1)`;
    }, 2000);

    const search = function () {
      emit('search', formDate.value);
    };

    const reset = function () {
      formDate.value = formDataOrigin;
      emit('reset');
    };

    return {
      formDate,
      color,

      search,
      reset,
    };
  },

  components: {
    myForm,
    RefreshLeft,
    Search,
  },
});
</script>

<style lang="less" scoped>
.search {
  background-color: #fff;
  background-repeat: 8px;

  .title {
    color: v-bind(color);
  }

  .footer {
    text-align: right;
    margin-right: 50px;
    padding-bottom: 20px;
  }
}
</style>
